<!DOCTYPE html>
<html class="no-js">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="description" content="">
		<meta name="keywords" content="">
		<link rel="icon" type="image/x-icon" href="/favicon.ico">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>前台-注册</title>

		<!-- Set render engine for 360 browser -->
		<meta name="renderer" content="webkit">

		<!-- No Baidu Siteapp-->
		<meta http-equiv="Cache-Control" content="no-siteapp" />

		<!-- Add to homescreen for Chrome on Android -->
		<meta name="mobile-web-app-capable" content="yes">

		<!-- Add to homescreen for Safari on iOS -->
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-title" content="Amaze UI" />

		<!-- Tile icon for Win8 (144x144 + tile color) -->

		<link rel="stylesheet" href="/assets/css/amazeui.min.css">
		<link rel="stylesheet" href="/assets/css/app.css">
		<link rel="stylesheet" href="/assets/css/style.css" />
		<style type="text/css">
			body {
				background-image: url(assets/images/ol_tpbp-02.jpg);
				background-repeat: no-repeat;
				background: cover;
				opacity: 0.7;
			}

			.am-form {
				height: 450px;
				width: 340px;
				/*z-index: 0;*/
				border-radius: 10px;
				background-color: #272727;
				position: absolute;
				left: 800px;
				top: 70px;
			}



.am-lg-text {
	margin-top: 130px;
	margin-left: 150px;
}

.am-lg-text h1 {
	color: #FFFFFF;
	font-size: 33px;
}

.am-lg-text P {
	color: #FFFFFF;
}


/*form*/



.tips-user h2
{
    text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0px 2px 0 rgba(0, 0, 0, .5);

    text-align: center;
    color: #666;
    margin: 30px 0 50px 0;
    letter-spacing: 4px;
    font: normal 26px/1 Verdana, Helvetica;
    position: relative;
}
 .tips-user h2:after, .tips-user h2:before
{
    background-color: #777;
    content: "";
    height: 1px;
    position: absolute;
    top: 15px;
    width: 130px;
}
  .tips-user h2:after
{
    background-image: -webkit-gradient(linear, left top, right top, from(#777), to(#fff));
    background-image: -webkit-linear-gradient(left, #777, #fff);
    background-image: -moz-linear-gradient(left, #777, #fff);
    background-image: -ms-linear-gradient(left, #777, #fff);
    background-image: -o-linear-gradient(left, #777, #fff);
    background-image: linear-gradient(left, #777, #fff);
    right: 0;
}

 .tips-user h2:before
{
    background-image: -webkit-gradient(linear, right top, left top, from(#777), to(#fff));
    background-image: -webkit-linear-gradient(right, #777, #fff);
    background-image: -moz-linear-gradient(right, #777, #fff);
    background-image: -ms-linear-gradient(right, #777, #fff);
    background-image: -o-linear-gradient(right, #777, #fff);
    background-image: linear-gradient(right, #777, #fff);
    left: 0;
}
.am-form-group{
	width: 100%;

}
.am-form-group>label{
	color: #FFFFDD;


}
.am-btn{
	background:	#d0d0d0	 ;
}
.username-field{

}


}
.reigister{
	margin-left: 250px;
}
		</style>

	</head>

	<body>
		<div class="am-lg-text">
			<h1 class="am-sans-serif">校园知事，知道你想知道的事</h1>
			<p>热门话题，精彩信息</p>
			<p>————用零碎的时间，发现更大的世界</p>
		</div>

		<form class="am-form" action="">
			<div class="tips-user">
				<h2>注册</h2>
			</div>
			<div class="am-form-group ">
				<label for="username">用户名：</label>
				<input type="text" id="username" autofocus="autofocus" required="required" maxlength="16" class="username-field" placeholder="用户名" name="username" />
			</div>
			<div class="am-form-group ">
				<label for="pwd">密码：</label>
				<input type="password" id="pwd" placeholder="密码" autofocus="autofocus" required="required" maxlength="30" class="psw-filed" name="password" />
			</div>
			<div class="am-form-group ">
				<label for="pwd1">确认密码：</label>
				<input type="password" id="pwd1" placeholder="再次输入密码" autofocus="autofocus" required="required" maxlength="30" class="psw-filed" />
			</div>

			<input class="am-btn" value="注册" onclick="checkInfo()" type="button" />
			<button class="am-btn" style="margin-left: 100px;" onclick="return BackTohome();">返回</button>
			<div class="reigister">
				<a href="/prev_login">直接登陆？</a>
			</div>
		</form>
	</body>

	<!--[if (gte IE 9)|!(IE)]><!-->
	<script src="/assets/js/jquery.min.js"></script>
	<!--<![endif]-->
	<!--[if lte IE 8 ]>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
	<script src="/assets/js/amazeui.min.js"></script>
	<script type="text/javascript" src="/assets/layer/layer.js"></script>

	<script type="text/javascript">
		function checkInfo() {
			var $username = $('#username');
			if($username.val().trim() == '') {
				layer.msg('用户名为空，请输入', {
					icon: 5,
					offset: '30%',
					time: 2000
				});
				$username.focus();
				return;
			}
			var $pwd = $('#pwd');
			if($pwd.val().trim() == '') {
				layer.msg('请输入密码', {
					icon: 5,
					offset: '30%',
					time: 2000
				});
				$pwd.focus();
				return;
			}
			var $pwd1 = $('#pwd1');
			if($pwd1.val().trim() == '') {
				layer.msg('请再次输入密码', {
					icon: 5,
					offset: '30%',
					time: 2000
				})
				$pwd1.focus();
				return;
			}
			if($pwd.val().trim() != $pwd1.val().trim()) {
				layer.msg('两次密码不一致，请重新输入', {
					icon: 5,
					offset: '30%',
					time: 2000
				});
				setVal(pwd1, ''); //清空重置
				$pwd1.focus();
				return;
			}
			var infor={
				username:$username.val().trim(),
				password:$pwd.val().trim()
			}

			$.post("/register", infor, function(data) {
				if(data=="注册成功"){
				 layer.msg('注册成功!', {
				  icon: 6,
				  time: 1000,
				  offset: '40%'
			 }, function() {
				window.location.href = '/';
			});
		    } else {
			layer.msg('用户名已存在,注册失败! ', {
				icon: 5,
				time: 1000,
				offset: '20%'
			});
		}
	   });
	}

		function setVal(id, val) {
			var data=document.getElementById('pwd1');
			if(data&&('value' in data)) {
				data.value=val;
			}
		}

		function BackTohome(){
		window.location.href="/"
		return false;
		}

	</script>
	</body>

</html>
